<template>
  <div>
    <page-list :url="url" :params="filter" @initList="_initList">
      <div class="info-list mb-10" v-for="(item, index) in list" :key="index">
        <div class="info_item" @click="goInfoDetail(item)">
          <van-tag v-if="item.IsSign" class="info_tag" color="#4fc08d"
            >已签收</van-tag
          >
          <van-tag v-else class="info_tag" type="warning">未签收</van-tag>

          <div style="font-size: 16px">{{ item.Title }}</div>
          <div class="info_text mt-5">
            <div>
              <div class="sub-title">{{ item.SubTitle }}</div>
              <div class="text_item">
                <img src="@/assets/Images/AppIcon/icon_list_user.png" alt="" />
                <div class="mb-10">发布方：{{ item.Publisher }}</div>
              </div>
              <div class="text_item">
                <img src="@/assets/Images/AppIcon/icon_list_date.png" alt="" />
                <div>发布时间：{{ item.PublishDate | formatDate }}</div>
              </div>
            </div>
            <img class="info_img" :src="baseUrl + item.Cover" alt="" />
          </div>
          <div class="info_btm">
            <div class="btm_text">
              <img src="@/assets/Images/AppIcon/icon_list_urgency.png" alt="" />
              <div>
                紧急度：{{
                  item.EmergencyLevel == "H"
                    ? "高"
                    : item.EmergencyLevel == "M"
                    ? "中"
                    : "低"
                }}
              </div>
            </div>
            <div class="btm_text">
              <img
                src="@/assets/Images/AppIcon/icon_list_security.png"
                alt=""
              />
              <div>安全级别：{{ item.SafetyLevel == "O" ? "公开" : "机密" }}</div>
            </div>
          </div>
        </div>
      </div>
    </page-list>
  </div>
</template>

<script>
import PageList from "@/components/PageList/PageList.vue";
import { mapGetters } from "vuex";
export default {
  components: { PageList },
  data() {
    return {
      list: [],
      url: this.$constUrl.COMMON_INTO_DATA,
      filter: { dataType: "List" },
    };
  },
  computed: {
    ...mapGetters(["baseUrl"]),
  },
  methods: {
    _initList(list) {
      this.list = list;
    },
    // 信息详情 对接甲方页面
    goInfoDetail(item) {
      this.$router.push("/CommonInfo/InfoDetail?id=" + item.ID);
    },
  },
};
</script>

<style lang="less">
.info-list {
  position: relative;
  padding: 10px;
  margin: 10px;
  background-color: #fff;
  font-size: 14px;
  border-radius: 5px;
}
.info_item {
  margin-top: 10px;
  /*margin-bottom: 10px;*/

  .info_tag {
    position: absolute;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    top: 0;
    right: 0;
  }
}
.sub-title {
  width: 200px;
  min-height: 30px;
  line-height: 1.3;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*显示的行数*/
  overflow: hidden;
}

.info_text {
  align-items: center;
  padding: 10px 0;
  display: flex;
  position: relative;
  justify-content: space-between;
  border-bottom: 1px solid #e8f1f8;

  .text_item {
    display: flex;
    color: #666;
    font-size: 14px;

    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }

  .info_img {
    height: 90px;
    width: 100px;
    position: absolute;
    right: 0;
    bottom: 10px;
  }
}

.info_btm {
  display: flex;
  margin-top: 10px;
  align-items: center;
  justify-content: space-between;

  .btm_text {
    display: flex;
    color: #666;
    font-size: 14px;
  }

  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
.van-field__control {
  padding: 0px !important;
}
</style>
